<template>
  <div>
    <div class="shopTitle">{{storeName}}</div>

    <div v-for="(homeItem, index) in homeData" :key="index">
      <div v-if="homeItem.type == '2'" class="bannerSwper">
        <a href="../search/main">
          <div class="indexSearch">
            <i class="iconfont icon-sousuo"></i> 热门搜索商品
          </div>
        </a>
        <swiper :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration"
                :circular="circular" :style="{'height': bannerHeight + 'px'}">
          <div v-for="(img,index2) in homeItem.items" :key="index2" @click="toProductList(img.id,img.title)">
            <swiper-item>
              <image :src="img.image_url" mode="widthFix" @load="imageLoad($event,index2)"/>
            </swiper-item>
          </div>
        </swiper>
      </div>

      <div class="indexCategorys" v-if="homeItem.type == '10'">
        <ul>
          <li v-for="(item,index10) in homeItem.items" :key="index10" @click="toProductList(item.id,item.title)">
            <h2>{{item.title}}</h2>
            <p>{{item.sub_title}}</p>
          </li>
        </ul>
      </div>

      <div class="hotBrand" v-if="homeItem.type == '5'">
        <h2><b>热门品牌折扣</b>
          <p>开启精品生活之旅</p>
        </h2>

        <dl v-for="(brand,index3) in homeItem.items" :key="index3" @click="toProductList(brand.id,brand.title)">
          <dt><img :src="brand.image_url +'?x-oss-process=image/quality,Q_80/format,jpg'" mode="widthFix"></dt>
          <dd>
            <h2>{{brand.title}}</h2>
            <h3>{{brand.sub_title}}</h3>
          </dd>
        </dl>
      </div>
    </div>
    <placeholder :show.sync="isPageEmpty" :message.sync="emptyMsg" :hidBtn="hidBtn" @tryAgain="onTap" :styleTop="0"/>
  </div>
</template>

<script>
  import {setStorage, getStorage} from '@/utils/wechat'
  import placeholder from '@/components/placeholder'
  import appconfig from '@/configs/appconfig'
  import {getQueryString} from '@/utils/index'

  export default {
    data() {
      return {
        homeData: [],
        isPageEmpty: false,
        hidBtn: false,
        emptyMsg: '',
        storeName: '',
        indicatorDots: true,
        autoplay: true,
        interval: 5000,
        duration: 900,
        circular: true,
        bannerHeight: 360,
        heightArr: []
      }
    },
    onShareAppMessage(obj) {
      return {
        title: this.storeName,
        path: '/pages/index/main',
        message: this.storeName
      }
    },
    components: {
      placeholder
    },
    async onLoad(e) {
      console.log("index 生命周期 onload" + JSON.stringify(e))
      let q = decodeURIComponent(e.q)
      if (q) {
        console.log("index 生命周期 onload url=" + q)
        if (q.indexOf('html/productdetails') != -1) {
          //跳转到商品详情
          const productId = getQueryString(q,"product_id")
          this.$wx.jumper('/pages/productDetails/main?productId='+productId)
        }
      }
      this.getdata()
      this.getBloggerInfo()
      this.handlerJumper(e.pageParams)
      this.$wx.setTitleBarTitle("")
    },
    methods: {
      async getBloggerInfo() {
        const bloggerInfo = await this.$fly.postWithNoProgress(this.$url.URL_BOLGGER_INFO, {userId: appconfig.CURRENT_BLOGGER})
        if (bloggerInfo.successCode) {
          if (bloggerInfo.data) {
            this.storeName = bloggerInfo.data.name
          }
        }
      },
      handlerJumper(jumperParams) {
        if (!this.$wx.isEmpty(jumperParams)) {
          const pageParams = JSON.parse(jumperParams)
          let params = ""
          if (!this.$wx.isNull(pageParams.params)) {
            for (var item in pageParams.params) {
              params += item + "=" + pageParams.params[item] + "&";
            }
            if (!this.$wx.isEmpty(params)) {
              params = params.substring(0, params.length - 1)
            }
          }
          this.$wx.jumper(pageParams.path + "?" + params)
        }
      },
      onTap() {
        this.getdata()
      },
      toProductList(id, title) {
        this.$wx.jumper('../productList2/main?promotionId=' + id + '&title=' + title)
      },
      imageLoad: function (e, index) {
        if (index == 0) {
          var res = wx.getSystemInfoSync()
          var imgwidth = e.mp.detail.width,
            imgheight = e.mp.detail.height,
            ratio = imgwidth / imgheight;
          this.bannerHeight = (res.windowWidth / ratio) - 26
        }
      },
      async getdata() {
        const data = await this.$fly.post(this.$url.URL_MINIHOME)
        if (data.successCode === 1) {
          if (this.$wx.isArrayEmpty(data.data)) {
            this.isPageEmpty = true
            this.hidBtn = true
            this.emptyMsg = '获取数据异常'
          } else {
            this.isPageEmpty = false
            this.homeData = data.data;
          }
        } else {
          this.isPageEmpty = true
          this.hidBtn = false
          this.emptyMsg = data.message
        }
      },
    },
    created() {
    }
  }
</script>

<style scoped>
  .shopTitle {
    padding: 8px 0;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    background: #fff
  }

  .bannerSwper {
    padding: 0 10px;
    background: #fff;
    position: relative;
  }

  .indexSearch {
    position: absolute;
    top: 10px;
    left: 32px;
    right: 32px;
    z-index: 99;
    height: 28px;
    line-height: 28px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 12px;
    text-align: center;
    color: #fff;
  }

  .indexSearch i {
    display: inline-block;
  }

  .indexSearch input {
    width: 100%;
    height: 28px;
    text-align: center;
    color: #fff;
  }

  .indexSearch input::placeholder {
    color: #fff;
  }

  .bannerSwper image {
    width: 100%;
  }

  .slide-image {
    width: 100%;
    height: 100%;
  }

  .indexCategorys {
    width: 100%;
    background: #fff;
  }

  .indexCategorys ul {
    width: 100%;
    overflow: hidden;
  }

  .indexCategorys ul li {
    width: 33.33%;
    text-align: center;
    margin: 16px 0;
    position: relative;
    float: left;
  }

  .indexCategorys ul li h2 {
    font-size: 18px;
    height: 20px;
  }

  .indexCategorys ul li p {
    color: #e2e2e2;
    height: 16px;
    font-size: 12px;
    margin-top: 3px;
  }

  .indexCategorys ul li:after {
    content: '';
    width: 1px;
    height: 34px;
    background: #dfdfdf;
    position: absolute;
    top: 8px;
    right: 0;
    transform: rotate(30deg);
  }

  .indexCategorys ul li:nth-child(3n):after {
    display: none;
  }

  .hotBrand {
    margin-top: 10px;
    background: #fff;
  }

  .hotBrand > h2 {
    font-size: 16px;
    text-align: center;
    padding: 6px 0;
  }

  .hotBrand > h2 b {
    font-weight: bold;
  }

  .hotBrand > h2 p {
    font-size: 14px;
  }

  .hotBrand dl {
    margin-bottom: 8px;
  }

  .hotBrand dl dt {
    text-align: center;
    min-height: 120px;
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    align-items: center;
  }

  .hotBrand dl dt img {
    width: 100%;
  }

  .hotBrand dl dd {
    padding: 2% 0;
    text-align: center;
  }

  .hotBrand dl dd h2 {
    font-weight: bold;
    font-family: 'FuturaStd';
  }
</style>
